<template>
   <div class="user-table p10 mt10 bg-white">
        <el-form :inline="true"  class="demo-form-inline" size="mini">
             
                 <el-form-item label="">
                <el-button-group >
                    <el-button 
                    v-for="item of typeMenu" 
                    :key="item.type" 
                    :type="item.isActive?'primary':'default'"
                    @click="clickChangeType(item)"
                    >{{item.name}}</el-button>
                   
                    </el-button-group>
                </el-form-item>

                   <el-form-item label="时间段">
                 <el-date-picker
                    v-model="opeationTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    :picker-options="pickerOptions1"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                 <el-button type="primary" @click="priceSearch">查询</el-button>
                </el-form-item>
        </el-form>
          
      <div class="user-common-flex">
       <div class="p20 flex">
          <dl class="">
             <dt class="mt10 color-6d727a">课程数</dt>
             <dd class="color-00aeff fs30">{{totalData.course_total_count}}</dd>
             <dd class="fs20 color-00aeff">开课讲师:{{totalData.course_docent_count}}</dd>
             <dd class="fs20 color-00aeff">人均开课:{{totalData.avg_docent_course_count}}课/人</dd>
           </dl>
           
       </div>
      <div class="p20 flex">
        <dl class="">
                  <dt class="mt10 color-6d727a">参课人次</dt>
                   <dd class="color-00aeff fs30">{{totalData.user_join_times}}</dd>
                  <dd class="fs20 color-00aeff">参课人数:{{totalData.course_user_counts}}</dd>
                  <dd class="mt10 color-00aeff">人均参课{{totalData.avg_join_usertimes}}课/人</dd>
                </dl>
      </div>


       <div class="p20 flex">
            <dl class="">
              <dt class="mt10 color-6d727a">充值金额</dt>
               <dd class="color-00aeff fs30">¥{{totalData.recharge_total_pearl}}</dd>
             <dd class="fs20 color-00aeff">充值人次:{{totalData.recharge_user_times}}</dd>
             <dd class="mt10 color-00aeff">次均充值:¥{{totalData.avg_recharge_pearl}}/次</dd>
           </dl>
       </div>

      <div class="p20 flex">
           <dl class="">
             <dt class="mt10 color-6d727a">交易金额</dt>
             <dd class="color-00aeff fs30">${{totalData.total_order_prices}}</dd>
              <dd class="fs20 color-00aeff">交易单数:{{totalData.total_order_counts}}</dd>
             <dd class="mt10 color-00aeff">每单平均:${{totalData.avg_order_counts}}/单</dd>
           </dl>
       </div>
      
       <div class="p20 flex">
           <dl class="">
              <dt class="mt10 color-6d727a">盈利金额</dt>
               <dd class="color-00aeff fs30">${{totalData.user_payoff_moneys}}</dd>
             <dd class="fs20 color-00aeff">交易人数:{{totalData.user_order_counts}}</dd>
             <dd class="mt10 color-00aeff">人均盈利:${{totalData.avg_payoff_moneys}}/人</dd>
           </dl>
       </div>
     
    </div>
    </div>
</template>

<script>
import service from "@/service/index_c";
export default {
  data() {
    return {
      opeationTime: [],
      current: {},
      before: {},
      totalData: {},
      typeMenu: [
        {
          name: "昨日",
          type: 1,
          isActive: false
        },
        {
          name: "近7日",
          type: 7,
          isActive: false
        },
        {
          name: "近30日",
          type: 30,
          isActive: true
        }
      ],
      times: "",
      percentage: 0,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  mounted() {
    this.queryChartCostData();
  },
  methods: {
    clickChangeType(item) {
      for (let it of this.typeMenu) {
        it.isActive = false;
      }
      item.isActive = true;
      this.opeationTime = [];
      this.queryChartCostData(item.type)
    },
    priceSearch() {
      for (let it of this.typeMenu) {
        it.isActive = false;
      }
       this.queryChartCostData('')
    },
    async queryChartCostData(day = 30) {
    let params={
        startTime:  this.opeationTime?this.opeationTime[0]:'',
        endTime:  this.opeationTime?this.opeationTime[1]:'',
        dateflag: day
      };
      let res = await service.haibeiLoadTopCourseStatList(params);
      if (res.success) {
        this.totalData = res.result;
      }
    }
  }
};
</script>

<style scoped>
.user-table {
}
.price {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
dl {
  /* text-align: center */
}
dl dt {
  font-size: 16px;
  color: #00aeff;
}

dl dd {
  margin-top: 20px;
  color: #6d727a;
  font-size: 12px;
}
.user-common-flex {
  display: flex;
  justify-content: space-around;
}

.user-count > div {
  width: 24.5%;
  background: #fff;
}
</style>